<template>
  <div class="title">
    <img src="../image/title.png" >
    <img class="dot" src="../image/dot.png" >
    <span :data="data">{{ title }}</span>
    <div class="opacity-wrap">
      <img class="opacity1" src="../image/opacity1.png" >
      <img class="opacity2" src="../image/opacity2.png" >
      <img class="opacity3" src="../image/opacity3.png" >
      <img class="opacity4" src="../image/opacity4.png" >
      <img class="opacity5" src="../image/opacity5.png" >
      <img class="opacity6" src="../image/opacity6.png" >
      <img class="opacity7" src="../image/opacity7.png" >
      <img class="opacity8" src="../image/opacity8.png" >
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: String
    }
  }
</script>

<style lang="less" scoped>
  @keyframes dot{
     0%{left: 0;}
     100%{left: 5%;}
  }
  @keyframes opacity1{
     0%{opacity: 0;}
     12.5%{opacity: 1;}
     25%{opacity: 1;}
     37.5%{opacity: 1;}
     50%{opacity: 1;}
     62.5%{opacity: 1;}
     75%{opacity: 1;}
     87.5%{opacity: 1;}
     100%{opacity: 1;}
  }
  @keyframes opacity2{
     0%{opacity: 0;}
     12.5%{opacity: 0;}
     25%{opacity: 1;}
     37.5%{opacity: 1;}
     50%{opacity: 1;}
     62.5%{opacity: 1;}
     75%{opacity: 1;}
     87.5%{opacity: 1;}
     100%{opacity: 1;}
  }
  @keyframes opacity3{
    0%{opacity: 0;}
    12.5%{opacity: 0;}
    25%{opacity: 0;}
    37.5%{opacity: 1;}
    50%{opacity: 1;}
    62.5%{opacity: 1;}
    75%{opacity: 1;}
    87.5%{opacity: 1;}
    100%{opacity: 1;}
  }
  @keyframes opacity4{
     0%{opacity: 0;}
     12.5%{opacity: 0;}
     25%{opacity: 0;}
     37.5%{opacity: 0;}
     50%{opacity: 1;}
     62.5%{opacity: 1;}
     75%{opacity: 1;}
     87.5%{opacity: 1;}
     100%{opacity: 1;}
  }
  @keyframes opacity5{
     0%{opacity: 0;}
     12.5%{opacity: 0;}
     25%{opacity: 0;}
     37.5%{opacity: 0;}
     50%{opacity: 0;}
     62.5%{opacity: 1;}
     75%{opacity: 1;}
     87.5%{opacity: 1;}
     100%{opacity: 1;}
  }
  @keyframes opacity6{
     0%{opacity: 0;}
     12.5%{opacity: 0;}
     25%{opacity: 0;}
     37.5%{opacity: 0;}
     50%{opacity: 0;}
     62.5%{opacity: 0;}
     75%{opacity: 1;}
     87.5%{opacity: 1;}
     100%{opacity: 1;}
  }
  @keyframes opacity7{
     0%{opacity: 0;}
     12.5%{opacity: 0;}
     25%{opacity: 0;}
     37.5%{opacity: 0;}
     50%{opacity: 0;}
     62.5%{opacity: 0;}
     75%{opacity: 0;}
     87.5%{opacity: 1;}
     100%{opacity: 1;}
  }
  @keyframes opacity8{
     0%{opacity: 0;}
     12.5%{opacity: 0;}
     25%{opacity: 0;}
     37.5%{opacity: 0;}
     50%{opacity: 0;}
     62.5%{opacity: 0;}
     75%{opacity: 0;}
     87.5%{opacity: 0;}
     100%{opacity: 1;}
  }
  .title {
  	width: 90%;
  	height: 2.87vh;
  	margin: 0 auto;
  	margin-top: 1.293vh;
    color: #00AEFF;
  	// background-image: url(image/title.png);
  	background-size: 100% 100%;
  	position: relative;
    .dot{
      width: 10px;
      height: 10px;
      position: absolute;
      left: 5%;
      top: -3px;
      animation: 2s dot 0s linear;
    }
    >img{
      width: 100%;
      height: 2.407vh;
      animation: 4s lineMove 0s linear;
    }
  	span {
  		position: absolute;
  		left: 3.7vh;
  		top: -0.9482vh;
  		font-size: 1.8518vh;
  	}
    .opacity-wrap{
      position: absolute;
      right: 0;
      top: 0;
      img{
        width: 14px;
        height: 9px;
        margin-left: 3px;
      }
      .opacity1{
        animation: 3s opacity1 0s infinite;
      }
      .opacity2{
        animation: 3s opacity2 0s infinite;
      }
      .opacity3{
        animation: 3s opacity3 0s infinite;
      }
      .opacity4{
        animation: 3s opacity4 0s infinite;
      }
      .opacity5{
        animation: 3s opacity5 0s infinite;
      }
      .opacity6{
        animation: 3s opacity6 0s infinite;
      }
      .opacity7{
        animation: 3s opacity7 0s infinite;
      }
      .opacity8{
        animation: 3s opacity8 0s infinite;
      }
    }
  }
</style>
